import React, { useEffect, useState } from 'react';
import { getBannerList } from '@/api/banner';
import { Carousel } from 'antd';
import { Image } from 'antd';
import './BannerList.css';

export default function BannerList() {
  const [bannerList, setBannerList] = useState([]);
  // eslint-disable-next-line no-unused-vars
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    fetchBannerList();
  }, []);

  const fetchBannerList = async () => {
    try {
      const response = await getBannerList();
      const { data } = response.data;
      setBannerList(data);
      console.log(data); // 打印获取到的横幅列表数据
    } catch (error) {
      console.error('获取横幅列表失败', error);
      // 处理请求失败的情况
    }
  };

  const handleSlideChange = (from, to) => {
    setCurrentSlide(to);
  };

  return (
    <div className="carousel-container">
      <Carousel
        autoplay
        beforeChange={handleSlideChange}
        afterChange={handleSlideChange}
      >
        {bannerList.map((banner, index) => (
          <div key={index} className="carousel-item">
            <Image
              width={'100%'}
              height={400}
              src={banner.banner_src}
              alt={banner.banner_des}
              className="carousel-image"
            />
          </div>
        ))}
      </Carousel>
    </div>
  );
}
